<template>
    <div class="swpie-detail">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <van-image
                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%96%87%E7%AB%A0%E6%B8%B8%E8%AE%B0%E8%AF%A6%E6%83%85/u1058.png" />
            </van-swipe-item>
            <van-swipe-item>
                <van-image
                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%96%87%E7%AB%A0%E6%B8%B8%E8%AE%B0%E8%AF%A6%E6%83%85/u1058.png" />
            </van-swipe-item>
            <van-swipe-item>
                <van-image
                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%96%87%E7%AB%A0%E6%B8%B8%E8%AE%B0%E8%AF%A6%E6%83%85/u1058.png" />
            </van-swipe-item>
            <van-swipe-item>
                <van-image
                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%96%87%E7%AB%A0%E6%B8%B8%E8%AE%B0%E8%AF%A6%E6%83%85/u1058.png" />
            </van-swipe-item>

            <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
        </van-swipe>
    </div>
</template>


<style scoped lang="scss">
.custom-indicator {
    position: absolute;
    color: white;
    right: 10px;
    bottom: 15px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 35px;
}
</style>